<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>登录界面</title>
    <script src="js/axios-0.18.0.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
    <!--<script src="js/element-ui/lib/index.js" type="text/javascript" charset="utf-8"></script>-->
    <link rel="stylesheet" href="./css/LoginPage.css">
    <!-- 引入字体图标 -->
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/Homepage.css">
    <!-- 引入样式 -->
    <!--<link rel="stylesheet" href="js/element-ui/lib/theme-chalk/index.css ">-->
<style>
    .add{
        width: 30px;
        height: 35px;
        position: relative;
        top: -45%;left: -29%; transform: translate(0, -50%);
        overflow: hidden;
        transition:width 0.3s;
    }
</style>
    <script src="js/jquery-1.4.2.js"></script>
    <script>
        $(function () {
            $(".add").hover(
                function () {
                    $(this).css("width","90px")
                },
                function () {
                    $(this).css("width","30px")
                }
            )
        })
    </script>
</head>
<body>
<div class="add" >
    <a  href="User-visitor-Page.html" style="color: #a262ad;text-decoration: none">
        <i class="fa fa-home fa-2x" aria-hidden="true" style="transform: rotate(0deg);background: #eae8f2;"></i>
        <span style="font-size: 25px;color: #a262ad;">首页</span>
    </a>
</div>
<div class="container" >

    <div class="form-box">
        <!-- 注册 -->
        <form class="register-box hidden">
            <h1>register</h1>
            <input type="text" placeholder="用户名" id="nickname">
            <input type="text" placeholder="账户" id="username">
            <input type="password" placeholder="密码" id="psw">
            <input type="password" placeholder="确认密码" id="psw2">
            <input type="text" name="code" placeholder="请输入验证码" id="captcha" />
            <img src="ferifyCode" id="changeImg" /><br />
            <!--<a href="#" id="changeImg1">看不清</a>-->
            <button type="button" onclick="add()">注册</button>
        </form>
        <!-- 登录 -->
        <!--<form class="login-box" action="MillionYuan/loginServlet" method="post">-->
        <form class="login-box">
            <h1>login</h1>
            <input type="text" placeholder="账户" id="account">
            <input type="password" placeholder="密码" name="psw" id="password" >
            <!--<input type="text" name="code" placeholder="请输入验证码" id="captcha" />-->
            <!--<img src="ferifyCode" id="changeImg" /><a href="#" id="changeImg1">看不清</a><br />-->
            <button type="button" onclick="logins()">登录</button>
        </form>
    </div>
    <div class="con-box left">
        <h2>欢迎来到<span>MillionYuan</span></h2>
        <p>快来領取你的专属<span>广告位</span>吧</p>
        <img src="./img/cat/1.png" alt="">
        <p>已有账号</p>
        <button id="login">去登录</button>
    </div>
    <div class="con-box right">
        <h2>欢迎来到<span>MillionYuan</span></h2>
        <p>快来进入属于你的<span>广告世界</span>吧</p>
        <img src="./img/cat/2.png" alt="">
        <p>没有账号？</p>
        <button id="register" @click="">去注册</button>
    </div>
</div>

<script>
    window.onload = function() {
        var mImg = document.getElementById("changeImg");
        var aChange = document.getElementById("changeImg1");
        mImg.onclick = function() {
            changeImg();
        }
        aChange.onclick = function() {
            changeImg();
        }
        function changeImg() {
            mImg.src = "ferifyCode?" + new Date().getMilliseconds();
        }
    }
    // 要操作到的元素
    var login=document.getElementById('login');
    var register=document.getElementById('register');
    var form_box=document.getElementsByClassName('form-box')[0];
    var register_box=document.getElementsByClassName('register-box')[0];
    var login_box=document.getElementsByClassName('login-box')[0];
    // 去注册按钮点击事件
    register.addEventListener('click',function (ev) {
        form_box.style.transform='translateX(80%)';
        login_box.classList.add('hidden');
        register_box.classList.remove('hidden');
    })

    // 去登录按钮点击事件
    login.addEventListener('click',function (ev) {
        form_box.style.transform='translateX(0%)';
        register_box.classList.add('hidden');
        login_box.classList.remove('hidden');
    })
    function logins() {
        var username = document.getElementById("account").value;
        var password = document.getElementById("password").value;
        console.log(username);
        console.log(password);
        axios({
            method: "post",
            url: "./loginServlet?",
            data: {
                username: username,
                psw: password
            }
        }).then(function(response) {
            // 成功响应处理
            if (response.data === 11) {//管理员
                location.href = "./Manager-bubble-Homepage.html";
            } else if (response.data===10) {//用户
                location.href = "./User-bubble-Homepage.html";
            } else {
                alert("账号密码输入有误!请重新输入");
                location.href = "./UserLoginAndRegisterPage.html";
            }
        })
    }
    function add() {
        var psw = document.getElementById("psw").value;
        var psw2 = document.getElementById("psw2").value;
        var nickname = document.getElementById("nickname").value;
        var username = document.getElementById("username").value;
        var code = document.getElementById("captcha").value;

        console.log(nickname);
        console.log(username);
        console.log(psw);
        console.log(psw2);
        if (psw===(psw2)){
            axios({
                method:"post",
                url:"./addtoServlet",
                data:{
                    nickname : nickname,
                    username : username,
                    psw : psw,
                    code : code
                }
            }).then(function (resp) {
                if (resp.data===12){
                    alert("验证码输入错误！");
                } else if (resp.data===true) {
                    alert("注册成功！");
                    location.href="./UserLoginAndRegisterPage.html";
                }else {
                    alert("账户已存在！请重新输入账户");
                }
            })
        }else{
            alert("两次密码不一致！");
        }
    }
</script>
</body>


</html>